<%--
  Created by IntelliJ IDEA.
  User: MSH
  Date: 2018-12-14
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    #mymap{
        height: 400px;
        width: 500px;
    }
</style>
<html>
<head>
    <title>客户表</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <!--启用较验-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.js"></script>
     <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/zh_CN.js"></script>
    <!--sweet提示框-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/hplus/css/plugins/sweetalert/sweetalert.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>
    <!--百度地图-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=x4GWag386iWUaZ6PVMEOSqLrkUWr4OE8"></script>

</head>
<body>
<form action="#" id="myForm" class="form-horizontal">
    <div class="pull-left col-sm-9">
    <div class="pull-right col-sm-6">

        <div class="form-group col-sm-3">
            <button onclick="delRoom()" class="btn btn-primary"><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;删除</button>
        </div>
        <div class="form-group col-sm-3">
            <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
        </div>
    </div>
    </div>
</form>

<!--增加模态框-->
<div  class="modal inmodal" id="addmodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userform1"  method="post" role="form">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">注册用户</h4>
                </div>
                <div class="modal-body">
                <div class="form-group">
                <label class="col-sm-4 text-right">姓名</label>
                <div class="col-sm-6">
                <input type="text" class="form-control" name="name"  />
                </div>
                </div>
                <div class="form-group">
                <label class="col-sm-4 text-right">电话</label>
                <div class="col-sm-6">
                <input type="text" class="form-control" name="phone"/>
                </div>
                </div>
                <div class="form-group">
                <label class="col-sm-4 text-right">邮件</label>
                <div class="col-sm-6">
                <input type="text" class="form-control" name="email"/>
                </div>
                </div>

                <div class="form-group">
                <label class="col-sm-4 text-right">地址</label>
                <div class="col-sm-6">
                <input type="text" class="form-control" name="address"  />
                </div>
                </div>

                <div class="form-group">
                <label class="col-sm-4 text-right">备注</label>
                <div class="col-sm-6">
                <input type="text" class="form-control" name="note">
                </div>
                </div>
                <div class="form-group">
                <label class="col-sm-4 text-right">性别</label>
                <div class="col-sm-6">
                <div class="radio-inline" style="margin-top: -8px">
                <input type="radio" name="sex" value="男" style="margin-top: 2px">男
                </div>

                <div class="radio-inline" style="margin-top: -8px">
                <input type="radio" name="sex" value="女" style="margin-top: 2px">女
                </div>
                </div>
                </div>
                </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button onclick="doadd()" type="button" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<div class="modal inmodal" id="myModal" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                </div><small class="font-bold">
            <div class="modal-body">
                <div id="mymap"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </small></div><small class="font-bold">
    </small></div><small class="font-bold">
</small></div>


 <div class="container">
     <table id="tb"></table>
 </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#tb").bootstrapTable({
            url:"${pageContext.request.contextPath}/guests/query",
            toolbar:'#dtn',//工具按钮用哪个容器
            striped: true,//隔行换色
            showRefresh: true,//是否显示刷新按钮
            height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            showToggle:true,//是否显示详细视图和列表视图的切换按钮
            //detailView:true,//是否显示父子表
            pagination:true, //是否显示分页（*）
            pageSize : 4,//单页记录数
            pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
            /* sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
             queryParams: function (params) {
             var temp = {
                 limit : params.limit,
                 offset : params.offset
             }
             return temp;
             },*/
            detailView:true,
            onExpandRow:function(index,row,$detail){
                var table = $detail.html("<table></table>").find("table");
                console.log(row);
                table.bootstrapTable({
                    url:'/carsales/queryByGid?id='+row.id+'',
                    striped:true,//隔行变色
                    columns:[
                        {
                            field: "id",
                            title: '编号'
                        },{
                            field: 'carComponents.brand',
                            title: '车辆品牌'
                        }, {
                            field: 'carComponents.model',
                            title: '车型'
                        },{
                            field:'carComponents.carConfig.level',
                            title:'车辆配置'
                        },{
                            field:'carComponents.carConfig.color',
                            title:'车辆颜色'
                        },{
                            field:'moeny',
                            title:'成交价格'
                        },{
                            field:'count',
                            title:'数量'
                        },{
                            field:'userInfo.workname',
                            title:'处理员工'
                        },{
                            field:'guests1.name',
                            title:'客户姓名'
                        },{
                            field:'date',
                            title:'时间'
                        },{
                            field:'note',
                            title:'备注'
                        }
                    ]
                })
            },
            columns:[{
                checkbox:true,
            },{
                field:'id',
                title:'编号'
            },{
              field:'name',
              title:'姓名'
        },{
                field:'phone',
                title:'电话'
            },{
                field:'email',
                title:'邮件',
            },{
                field:'address',
                title:'地址'
            },{
                field:'note',
                title:'备注'
            },{
                field:'sex',
                title:'性别'
            },{
               title:'操作',
                title:'操作',
                formatter:function(value,row,index){
                    return "<button class='btn  btn-primary' onclick='toxiugai(("+index+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>&nbsp;&nbsp;&nbsp;<button onclick=openmap('"+row.address+"')  type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal'>" + " <i class='fa fa-map-marker'></i> &nbsp;&nbsp;位置 + </button>"
                }
            }]
        })
    });
    //校验
$(function () {
    <!--校验框架-->
    $('#addmodal').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空！'
                    }
                }
            }
        }
    });
});
    //打开增加的对话框
    function toadd() {
        $("#addmodal").modal("show") ;
    }
    //增加用户
    function doadd(){
        //
        //启用较验
        // $('#addmodal').data('bootstrapValidator').validate();
        $('#addmodal').data('bootstrapValidator').validate();
        //验证是否通过true/false
        var flag = $('#addmodal').data('bootstrapValidator').isValid() ;
        if (flag){
            //
            //绑定当前页开始
            var options = $("#tb").bootstrapTable('getOptions') ;
            //得到当前页
            var pn = options.pageNumber ;
            $("input[name='pn']").val(pn) ;
            //序列化表单
            var formStr=$('#userform1').serialize();
            //处理表单控件的中文乱码
            guests = decodeURIComponent(formStr,true);
            $.ajax({
                'type':'post',
                'url':'/guests/save',
                'data':guests,
                success:function(data){
                    //关闭对话框
                    $("#addmodal").modal('hide') ;
                    //重新加载表格
                    $('#tb').bootstrapTable('load',data) ;
                    //提示增加成功
                    swal("提示信息", "增加成功!", "success");
                }
            })
        }


    }


    //删除用户信息
    // function toDel(id) {
    //     swal({
    //         title: "您确定要删除这条信息吗",
    //         text: "删除后将无法恢复，请谨慎操作！",
    //         type: "warning",
    //         showCancelButton: true,
    //         confirmButtonColor: "#DD6B55",
    //         confirmButtonText: "删除",
    //         closeOnConfirm: false
    //     }, function () {
    //         $.post("/guests/dele", {'id': id}, function (data) {
    //             swal({
    //                     title: "删除成功！",
    //                     type: "success"
    //                 },
    //                 function () {
    //                     window.location = ""
    //                 })
    //         })
    //     });
    // }
    //删除
    function delRoom(id) {
        var ids = "" ;
        //1.得到要删除的行
        //返回所选的行，当没有选择任何行的时候返回一个空数组。
        var rows = $("#tb").bootstrapTable("getSelections") ;
        if (rows.length==0){
            alert("请选择要删除的数据！") ;
        }
        else{
            $.each(rows,function (index,row) {
                ids = ids + row.id + "-";

            }) ;
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                //得到当前页
                //绑定当前页开始
                //var options = $("#roominfotb").bootstrapTable('getOptions') ;
                //得到当前页
                //var pn = options.pageNumber ;
                $.post("/guests/deleteRoom",{'ids': ids},function(data){
                    //友好的提示
                    swal({title:"删除成功！",
                            text:"您已经永久删除了这条数据。",
                            type:"success"},
                        //刷新页面
                        function(){window.location=""});

                })

            });
        }
    }

    //打开修改对话框,回传要修改行的数据
    function toxiugai(index) {
        //取消所有选择
        $("#tb").bootstrapTable("uncheckAll");
        //选中要修改的行
        $("#tb").bootstrapTable("check", index);

        //得到所选行的数据
        var row = $("#tb").bootstrapTable("getSelections")[0];
        //绑定主键
        $("input[name='id']").val(row.id);
        //绑定当前页开始
        var options = $("#tb").bootstrapTable('getOptions') ;
        //得到当前页
        var pn = options.pageNumber ;
        //绑定当前页
        // $("input[name='pn']").val(pn) ;
        $("input[name='name']").val(row.name);
        $("input[name='phone']").val(row.phone);
        $("input[name='email']").val(row.email);
        $("input[name='address']").val(row.address);
        $("input[name='note']").val(row.note);


        // $("[name='sex'][value='" + row.sex + "']").attr("checked", "checked");
        var sex = row.sex ;

        if (sex =='男'){
            $("#a").html("<input type=\"radio\" checked=\"checked\" name=\"sex\" value=\"男\" style=\"margin-top: 2px\"> 男") ;
            $("#b").html("<input type=\"radio\" name=\"sex\" value=\"女\" style=\"margin-top: 2px\"> 女") ;
        }
        else if (sex =='女'){
            $("#a").html("<input type=\"radio\"  name=\"sex\" value=\"男\" style=\"margin-top: 2px\"> 男") ;
            $("#b").html("<input type=\"radio\" checked=\"checked\" name=\"sex\" value=\"女\" style=\"margin-top: 2px\"> 女") ;
        }

        //.打开对话框
        $("#toxiugaimodal").modal("show");

    }
    function doxiugai(){
        //.
        var params = $("#userxiugaiform").serialize();
        //处理表单控件的中文乱码
        params = decodeURIComponent(params,true);
        $.ajax({
            'type':'post',
            'url':'/guests/upGuests',
            'data':params,
            success:function(data){
                //关闭对话框
                $("#toxiugaimodal").modal('hide') ;
                //友好的提示
                swal("提示信息", "修改成功!", "success");
                //重新加载表格
                $("#tb").bootstrapTable('load',data) ;

            }
        })
    }

    function openmap(address) {
        // 创建地图实例
        var map = new BMap.Map("mymap");
        // 创建点坐标
        var point = new BMap.Point(114.48269393, 36.60930793);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 15);
        //
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        var top_right_navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
        }); //右上角，仅包含平移和缩放按钮
        map.addControl(top_left_control);
        map.addControl(top_left_navigation);
        map.addControl(top_right_navigation);

        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(address, function (point) {

            if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMap.Marker(point));
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "邯郸市");

    }
</script>
<!--修改模态框-->
<div  class="modal inmodal" id="toxiugaimodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userxiugaiform"  method="post" role="form">

            <input type="hidden" name="id">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">注册用户</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right" for="name">姓名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name"  placeholder="用户名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-sm-4 text-right">电话</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="phone"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-4 text-right">邮件</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="email"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-4 text-right">地址</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="address"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="note" class="col-sm-4 text-right">备注</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="note"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sex" class="col-sm-4 text-right">性别</label>
                        <div class="col-sm-6">
                            <div id="a" class="radio-inline" style="margin-top: -8px">
                                <input type="radio" value="男" name="sex"> 男
                            </div>

                            <div id="b" class="radio-inline" style="margin-top: -8px">
                                <input type="radio" value="女" name="sex"> 女
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <button onclick="doxiugai()" type="button" class="btn btn-primary">修改</button>
                    </div>


